<template>
    <a-modal v-model="visible" @cancel="handelClose" :title="title" destroyOnClose :maskClosable="false" width="960px">
        <template slot="footer">
            <a-button @click="handelClose">取消</a-button>
        </template>
        <a-form-model :model="order" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="订单编号">
                <a-input size="large" disabled v-model="order.orderNumber" />
            </a-form-model-item>
            <a-form-model-item label="下单人">
                <a-input size="large" disabled v-model="order.orderUserName" />
            </a-form-model-item>
            <a-form-model-item label="患者信息">
                <a-input size="large" disabled v-model="order.patientName" />
            </a-form-model-item>
            <a-form-model-item label="配送地址">
                <a-input size="large" disabled v-model="order.deliveryAddress" />
            </a-form-model-item>
            <a-form-model-item label="订单详情">
                <a-table :columns="columns" rowKey="id" :data-source="orderDetailList" bordered :pagination="false"> 
                  <template slot="productPic" slot-scope="text, record" >
                    <a-avatar shape="square" :size="72" :src="record.productPic" icon="file-image" />
                  </template>
                  <template slot="isVerify" slot-scope="text, record" >
                    {{ record.isVerify == 0 ? "需核验" : record.inventoryStatus == 1 ? "不需核验" : "未知" }}
                  </template>
                 </a-table>
            </a-form-model-item>
            <a-form-model-item label="备注">
            <a-input size="large" type="textarea" disabled v-model="order.remark" />
            </a-form-model-item>
        </a-form-model>
    </a-modal>
  </template>
  <script>
  export default {
    name: "OrderDetailForm",
    props: {
      visibleModal: {
        type: Boolean,
        default: false,
      },
      formData: {
        type: Object,
        default: () => { },
      },
    },
    data() {
      return {
        title: "订单详情",
        visible: false,
        columns: [
          { title: '商品名称', dataIndex: 'productName' },
          { title: '商品图片', dataIndex: 'productPic', scopedSlots: { customRender: 'productPic' } },
          { title: '规格', dataIndex: 'model' },
          { title: '厂家', dataIndex: 'factory' },
          { title: '数量', dataIndex: 'quantity' },
          { title: '是否核验', dataIndex: 'isVerify', scopedSlots: { customRender: 'isVerify' } },
        ],
        order: {},
        orderDetailList: [],
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
        current: 0,
      };
    },
    watch: {
      visibleModal: function (val) {
        this.visible = val;
      },
      formData: function (val) {
        this.order = val
        this.orderDetailList = val.orderDetailList
      }
    },
    methods: {
      handelClose() {
        this.visible = false;
        this.$emit("close");
      }
    },
  };
  </script>
  <style scoped>
    .ant-input[disabled] {
        color: rgba(0, 0, 0, 0.65);
        background-color: #FFF;
        cursor: not-allowed;
        opacity: 1;
    }
  </style>